<!-- <template>
  <div id="app">
    <router-view />
  </div>
</template>

<style>
html,
body,
#app {
  width: 100%;
  height: 100%;
}
app-head
</style> -->

<template>
  <div id="app">
    <div class="app-head">
      <h3 @click="routeTo('')">VUE 3</h3>
    </div>
    <div class="app-container">
      <div class="nav-side">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
        >
          <el-sub-menu v-for="(nav, index) in navArr" :index="index.toString()">
            <template #title>
              <!-- <el-icon><icon-menu /></el-icon> -->
              <el-icon><component :is="nav.icon" /></el-icon>
              <span>{{ nav.title }}</span>
            </template>
            <el-menu-item
              @click="routeTo(item)"
              v-for="(item, idx) in nav.child"
              :key="`item-${idx}`"
            >
              {{ item.title }}
            </el-menu-item>

            <!-- <el-menu-item-group title="Group Two">
              <el-menu-item index="1-3">item three</el-menu-item>
            </el-menu-item-group>
            <el-sub-menu index="1-4">
              <template #title>item four</template>
              <el-menu-item index="1-4-1">item one</el-menu-item>
            </el-sub-menu> -->
          </el-sub-menu>
        </el-menu>
      </div>
      <div class="main-container">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";
import { Document, Menu as IconMenu } from "@element-plus/icons-vue";
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};

const navArr: Array<any> = [
  {
    title: "vue3语法糖",
    icon: Document,
    child: [
      {
        title: "Reactive",
        url: "/vue3/reactive",
      },
      {
        title: "Watch",
        url: "/vue3/watch",
      },
      {
        title: "Icon",
        url: "/vue3/icon",
      },
    ],
  },
  {
    title: "组件模块",
    icon: IconMenu,
    child: [
      {
        title: "Tooltip",
        url: "/vue3/icon",
        // child: [
        //   {
        //     title: "tooltip-1",
        //   },
        // ],
      },
      {
        title: "Input",
        url: "/Vue3/icon",
      },
    ],
  },
  {
    title: "功能模块",
    icon: IconMenu,
    child: [
      {
        title: "平台选择器",
        url: "/vue3/icon",
      },
    ],
  },
];

// const router: any = inject("router");
const router = useRouter();
function routeTo(item: any) {
  router.push(item ? item.url : "/");
}
</script>

<style lang="scss">
html,
body,
#app {
  width: 100%;
  height: 100%;
}
</style>
<style lang="scss" scoped>
.app-head {
  font-weight: bold;
  font-size: 32px;
  color: #fff;
  padding: 20px 30px;
  background-color: #535c64;
  position: fixed;
  width: 100%;
  z-index: 9999;
  h3 {
    cursor: pointer;
    display: inline-block;
  }
}
.app-container {
  padding-top: 77px;
  display: flex;
  .nav-side {
    flex: 0 0 auto;
    height: calc(100vh - 77px);
    overflow-y: scroll;
    overflow-x: hidden;
    border-right: 1px solid #dddfe6;
  }
  .main-container {
    flex: 1 1 auto;
    padding: 20px 30px;
  }
}
/* element */
::v-deep {
  .el-menu {
    border-right: none !important;
    width: 100%;
  }
}
</style>
